<template>
    <!-- 触发抽屉显示的按钮 -->
    <el-button type="primary" @click="drawer = true">选择商品</el-button>
    <!-- 商品选择抽屉 -->
    <el-drawer v-model="drawer" title="商品列表" size="60%">
        <!-- 查询表单 -->
        <el-form :inline="true" :model="formData" class="demo-form-inline">
          <el-form-item>
              <!-- 分类树选择组件 -->
              <CategoryTree v-model="formData.categoryId" title="分类"></CategoryTree>
          </el-form-item>
          <el-form-item>
              <!-- 枚举选择组件 -->
              <enum v-model="formData.status" enumName="ProductStatus" :isAll0="true"></enum>
          </el-form-item>
          <el-form-item>
              <!-- 关键字输入框 -->
              <el-input v-model="formData.name" placeholder="请输入关键字" clearable />
          </el-form-item>
          <el-form-item>
              <!-- 查询按钮 -->
              <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
      </el-form>
      <!-- 商品表格 -->
      <el-table :data="tableData" style="width: 100%" ref="tableRef">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="id" label="id" width="150" />
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="subName" label="subName" width="120" show-overflow-tooltip/>
        <el-table-column prop="img" label="img" width="120">
          <template #default="scope">
            <!-- 商品图片展示 -->
            <img :src="scope.row.img[0]" width="50" height="50" />
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="categoryId" width="150" />
        <el-table-column prop="statusX" label="状态" width="120" />
        <el-table-column prop="lastUpdateBy" label="最后更新人" width="120" :formatter="formatter"/>
        <el-table-column prop="lastUpdateTime" label="最后更新时间" width="120" :formatter="formatter"/> 
      </el-table>
      <!-- 分页组件 -->
      <el-pagination background layout="total, prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
      @current-change="pageChange">
      </el-pagination>
      <!-- 选择选中商品按钮 -->
      <el-button type="danger" @click="onSelect">选择选中商品</el-button>
    </el-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, defineModel } from 'vue'
import { productApi } from '@/api'
import { dayjs } from 'element-plus'
import Enum from '@/components/Enum.vue';
import CategoryTree from '@/components/CategoryTree.vue';
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 表格数据
const tableData = ref([])
// 控制抽屉显示隐藏
const drawer = ref(false)
// 绑定模型值
const modelValue = defineModel()
// 表格引用
const tableRef = ref()
// 查询表单数据
const formData = reactive({
  name: "",
  categoryId: 0,
  status: 0
})
// 分页数据
const pageData = reactive({
  total: 0,
  pageSize: 5,
  pageNum: 1
})

// 调用商品API获取数据
const callProductApi = () => {
  let params = {
    pageNum: pageData.pageNum,
    pageSize: pageData.pageSize,
    name: formData.name == "" ? undefined : formData.name,
    categoryId: formData.categoryId == 0 ? undefined : formData.categoryId,
    status: formData.status == 0 ? undefined : formData.status
  }

  productApi.select.call(params).then(res => {
    pageData.total = res.count
    tableData.value = res.items
  })
}

// 分页改变时触发
const pageChange = (pageNum: number) => {
  pageData.pageNum = pageNum
  callProductApi()
}

// 格式化表格列数据
const formatter = (row: any, column: any, cellValue: any, index: number) => {
  if (column.property === 'lastUpdateTime') {
    return dayjs(cellValue).format('YY年MM月DD HH:mm')
  } else if (column.property === 'lastUpdateBy') {
    return cellValue + " 同志"
  }
  return cellValue
}

// 组件挂载后调用
onMounted(() => {
  callProductApi()
})

// 提交查询
const onSubmit = () => {
  callProductApi()
}

// 选择选中商品
const onSelect = () => {
  let selectedRows = tableRef.value.getSelectionRows()
  modelValue.value = selectedRows
  console.log(selectedRows)
  drawer.value = false
}
</script>